<template>
    <div class="me-page">
        <headBar isBack="show">
            <div slot="xm-header-center">
                <div class="xm-header-title">售后</div>
            </div>
            <div slot="xm-header-right"></div>
        </headBar>
        <div class="shouhou-wrap">
            <div class="input-wrap flex border-bottom">
                <label>原因</label>
                <select class="flex-1" v-model="form.type">
                    <option value="">请选择原因</option>
                    <option value="1">服务态度问题</option>
                    <option value="2">物流问题</option>
                    <option value="3">商品质量</option>
                    <option value="4">其他</option>
                </select>
            </div>
            <div class="input-wrap flex">
                <label>说明 <span>0/200</span></label>
                <textarea class="flex-1" placeholder="请输入事项具体说明" v-model="form.description"></textarea>
            </div>
            <div class="notice" v-show="notice">
                <p class="error">{{notice}}</p>
            </div>
        </div>

        <section class="bottom-section">
            <div class="foot-bar flex">
                <a href="javascript:void(0)" class="flex-1" @click="insertBuyerAfterSales">确认提交</a>
            </div>
        </section>
    </div>
</template>
<script>
    export default {
        props: {},
        data() {
            return {
                notice: '',
                form: {
                    type: '',
                    description: ''
                }
            };
        },
        methods: {
            tel(phone) {
                location.href = 'tel:' + phone;
            },
            insertBuyerAfterSales() {
                if (this.verify()) {
                    insertBuyerAfterSales(this.form).then(data => {
                        if (data.returnCode == '000000') {
                            window.history.back();
                        }
                    })
                }
            },
            verify() {
                if (this.form.type == '') {
                    this.notice = '请选择原因';
                    return false;
                }
                if (this.form.description == '') {
                    this.notice = '请填写说明';
                    return false;
                }
                this.notice = '';
                return true;
            }
        },
        filters: {},
        created() {
//            this.getSalesman();
        },
        mounted() {

        },
        components: {}
    };
</script>
<style lang="less" scoped>
    .shouhou-wrap {
        margin-top: .16rem;
        background: #fff;
        .notice{
            padding-left: 2rem;
        }
    }
    .input-wrap {
        padding: .32rem;
        label {
            width: .5rem;
            line-height: .36rem;
            margin-right: 1.1rem;
            font-size: .24rem;
            color: #333333;
            span {
                line-height: .28rem;
                margin-top: .08rem;
                font-size: .2rem;
                color: #999999;
            }
        }
        select {
            height: .36rem;
            line-height: .36rem;
            border: none;
            outline: none;
            background: transparent;
            font-size: .24rem;
            color: #333;
        }
        textarea {
            height: .72rem;
            line-height: .36rem;
            border: none;
            outline: none;
            resize: none;
            font-size: .24rem;
            color: #666;
        }
    }
</style>
